<template>
  <div>
    <top-bar title="好物推送" bgc="background-color:#fff"></top-bar>
    <van-pull-refresh v-model="isLoading" @refresh="pullDown">
      <van-list
        style="margin-bottom: 15vh;"
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <div class="left">
          <my-list :dataList="recomListLeft"></my-list>
        </div>
        <div class="right">
          <my-list :dataList="recomListRight"></my-list>
        </div>
      </van-list>
    </van-pull-refresh>
    <van-icon class="addrecom" size="60px" name="add" color="red" @click="addClick"></van-icon>
  </div>
</template>

<script>
import MyList from "./component/list";
import TopBar from "@/views/component/topBar";
export default {
  components: {
    MyList,
    TopBar
  },
  data() {
    return {
      recomListLeft: [],
      recomListRight: [],
      pageSize: 10,
      pageNum: 1,
      loading: false,
      completed: false,
      isLoading: false,
      finished: false
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.$api
        .get("/api/recommend/list", {
          params: { pageSize: this.pageSize, pageNum: this.pageNum, status: 1 }
        })
        .then(res => {
          let a = res.data.data.records.filter(
            (item, index) => index % 2 === 0
          );
          this.recomListLeft.push(...a);
          let b = res.data.data.records.filter(
            (item, index) => index % 2 === 1
          );
          this.recomListRight.push(...b);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getList();
    },
    // 下拉刷新
    pullDown() {
      this.pageNum = 1;
      this.recomListLeft = [];
      this.recomListRight = [];
      this.completed = false;
      this.isLoading = true;
      this.getList();
    },
    addClick() {
      this.$router.push({ name: "recommendadd" });
    }
  }
};
</script>

<style scoped>
.left,
.right {
  width: calc(50% - 5px);
}
.left {
  float: left;
  margin: 2px 2px 2px 1px;
}
.right {
  float: left;
  margin: 2px 1px 2px 2px;
}
.addrecom {
  position: fixed;
  right: 16px;
  top: 520px;
}
</style>

